<script>
export default {
  data() {
    return {
      Cats: [
        {
          name: 'Чехлы',
          id: 'cases',
          products: [
            { name: 'Стеклянные', id: 'glass', photo: 'img/glass.png' },
            { name: 'Силиконовые', id: 'selicon', photo: 'img/selicon.png' },
            { name: 'Кожаные', id: 'lether', photo: 'img/lether.png' }
          ],
          type: 'sub'
        },
        {
          name: 'Наушники',
          id: 'earphones',
          products: [
            { name: 'Apple EarPods', id: 'earpods', photo: 'img/earpods.png', cost: 1999 },
            { name: 'Apple EarPods', id: 'earpods2', photo: 'img/earpods2.png', cost: 1999 },
            { name: 'Apple Earpods', id: 'earpods3', photo: 'img/earpods3.png', cost: 2999 }
          ],
          type: 'prods'
        },
        {
          name: 'Беспроводные наушники',
          id: 'w_earphones',
          products: [
            { name: 'Apple AirPods', id: 'airpods', photo: 'img/airpods.png', cost: 12990 },
            {
              name: 'Apple AirPods Pro',
              id: 'airpodspro',
              photo: 'img/airpodspro.png',
              cost: 22999
            },
            { name: 'Beats', id: 'beats', photo: 'img/beats.png', cost: 10000 }
          ],
          type: 'prods'
        }
      ]
    }
  }
}
</script>

<script setup>
import ProductsSection from '../components/ProductsSection.vue'
</script>

<template>
  <main>
    <ProductsSection v-for="cat in Cats" :cat="cat" />
  </main>
</template>

<style scoped>
main {
  width: 100%;
  margin-top: 30px;
  color: black;
}
</style>
